<template>
	<scroll-view class="detail" @scroll="scrollHandle" scroll-y @scrolltoupper="toUp" @scrolltolower="toLow"
	 :upper-threshold="10" :scroll-top="topDistance">
		<view class="nav-wrap" :style="'opacity:'+navOpacity">
			<view class="nav-btn">
				<view class="nav_btn" @click="scroolTo(0)">
					商品
				</view>
				<view class="nav_assess" @click="scroolTo(1)">
					评价
				</view>
				<view class="nav_detail" @click="scroolTo(2)">
					详情
				</view>
				<view class="nav_recommend" @click="scroolTo(3)">
					推荐
				</view>
			</view>
			<view class="nav-slid-wrap">
				<view class="slid" :style="'left:'+slidLeft*25+'%;'">
					<view class="slid-bg">
					</view>
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<swiper class="top-swiper" indicator-dots indicator-active-color="#f4361c" autoplay circular>
			<swiper-item v-for="(item,index) in swiperImg" :key="index">
				<navigator>
					<image class="img" :src="item" mode="widthFix"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<!-- 价格 标题 -->
		<view class="price-title">
			<view class="price">
				¥{{allData.price}}
			</view>
			<view class="title-wrap">
				<view class="title">
					{{allData.good_name}}
				</view>
				<view class="share">
					<uni-icons class="share-icon" type="redo-filled" size="15" color="#969799"></uni-icons>
					分享
				</view>
			</view>
			<!-- <view class="note">
				{{allData.info[0].info}}
			</view> -->
		</view>
		<!-- 类别选择 -->
		<uni-list :border="false" class="list-wrap">
			<view class="partition"></view>
			<!-- <uni-list-item title="运费 " :showArrow="false" disabled @click="test">
				<template slot="body">
					<view class="body-slot">
						¥0.00-13.00
					</view>
				</template>
			</uni-list-item> -->
			<!-- <view class="partition"></view> -->
			<uni-list-item title="服务 " @click="openServe">
				<template slot="body">
					<view class="body-slot" id="assess">
						收货后结算 · 快递发货
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="已选 " @click="openguige">
				<template slot="body">
					<view class="body-slot">
						规格
					</view>
				</template>
			</uni-list-item>
			<view class="partition"></view>
			<uni-list-item title="商品评价" rightText="查看全部">
				<template slot="body">
					<view class="body-slot">
						2
					</view>
				</template>
			</uni-list-item>
			<uni-list-item :showArrow="false" disabled>
				<template slot="body">
					<view class="goods-assess">
						<view class="user-wrap">
							<view class="user-info">
								<view class="user-icon">
									<uni-icons type="contact" size="20"></uni-icons>
								</view>
								<view class="user-name">
									普通用户
								</view>
							</view>
							<view class="rate-wrap">
								<uni-rate disabled size="12" :readonly="true" :value="4" activeColor="#FE4340" />
							</view>
						</view>
					</view>
					<view class="goods-classify">
						宋意中秋礼盒
					</view>

				</template>
			</uni-list-item>

		</uni-list>
		<!--商品导航 -->
		<uni-goods-nav class="goods-nav" :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
		 @buttonClick="buttonClick" />
		<!-- 弹出层 -->
		<!-- 服务弹出层 -->
		<uni-popup ref="servePopup" type="bottom">
			<view class="serve-popup">
				<view class="card">
					<view class="title">
						收货后结算
					</view>
					<view class="note">
						该店铺交易由有赞提供资金存管服务，当符合以下条件时，资金自动结算给商家:买家确认收货或到达约定的自动确认收货日期。交易资金未经有赞存管的情形(储值
						型、电子卡券等)不在本服务范围内。
					</view>
				</view>
				<view class="card">
					<view class="title">
						快递发货
					</view>
					<view class="note">
						可选择快递发货配送.上门，本商品运费:￥0.00-13.00
					</view>
				</view>
				<view class="card-btn" @click="closeServerPop">
					我知道了
				</view>
			</view>
		</uni-popup>
		<!-- 选择商品规格弹出层 -->
		<uni-popup ref="guigePopup" type="bottom">
			<view class="guige-popup">
				<view class="guige-top">
					<view class="guige-img">
						<image class="img" :src="sku.pic" mode=""></image>
					</view>
					<view class="guige-price-wrap">
						<view class="guige-close-box">
							<uni-icons type="closeempty" size="20" @click="closeGuidePop"></uni-icons>
						</view>
						<view class="guige-price">
							¥ {{sku.price}}
						</view>
						<view class="guige-description">
							选择 规格
						</view>
					</view>
				</view>
				<view class="guige-body">
					<view class="guige-body-tips">
						规格:
					</view>
					<view class="goods-box-wrap">
						<view @click="toggolSku(item)" v-for="(item,index) in allData.info[0].edition" :key="index" class="goods-item">
							<view class="goods-item-img">
								<image class="img" :src="item.pic" mode=""></image>
							</view>
							<view class="goods-item-text">
								{{item.sku}}
							</view>
						</view>
					</view>
					<view class="guige-footer">
						<view class="goods-number">
							购买数量:
						</view>
						<button-grounp v-model="goodsNum"></button-grounp>
					</view>
					<view class="guige-immediately-shoping">
						立即购买
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="partition"></view>
		<view class="shop-wrap">
			<view class="shop-log">
				<image src="http://pic.yupoo.com/isfy666/d2834612/44d41bd8.png" mode="widthFix">
			</view>
			<view class="shop-title">
				<view class="shop-name">
					㤫原创
				</view>
				<view class="shop-description" id="details">
					店铺描述
				</view>
			</view>
		</view>
		<view class="partition"></view>
		<!-- 详情 -->
		<view class="babyDetail">--宝贝详情--</view>
    
		<!-- <view class="goods-detail">
			<navigator url="/pages/detail/detail" class="goods-item" v-for="(item,index) in goodsList" :key="index">
				<view class="goods-img">
					<image class="grid-middle" :src="item.img_url"></image>
				</view>
				<view class="goods-bottom-wrap">
					<view class="goods-description">
						㤫原创《五星出东方》麒麟夜光款精品定制手机壳包邮
					</view>
					<view class="price-wrap">
						<view class="price">
							¥56.00
						</view>
						<view class="icon">
							<uni-icons type="cart-filled" size="20" color="#FF4B4B"></uni-icons>
						</view>
					</view>
				</view>
			</navigator>
		</view> -->
		<view class="partition"></view>
		<!-- 推荐 -->
		<view class="babyRecommend">--宝贝推荐--</view>
		<view class="goods-recommend">
      <view @click="toDetail(item)" class="goods-item" v-for="(item,index) in goodsList" :key="index">
				<view class="goods-img">
					<image class="grid-middle" :src="item.pic"></image>
				</view>
				<view class="goods-bottom-wrap">
					<view class="goods-description">
						<!-- 㤫原创《五星出东方》麒麟夜光款精品定制手机壳包邮 -->
            {{item.title}}
					</view>
					<view class="price-wrap">
						<view class="price">
							<!-- ¥56.00 -->
							¥{{item.promotion_price}}
						</view>
						<view class="icon">
							<!-- <uni-icons type="cart-filled" size="20" color="#FF4B4B"></uni-icons> -->
						</view>
					</view>
				</view>
      </view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				allData: [], //全部数据
				swiperImg: [], // 轮播图数据
				sku: {
					price: 0,
					pic: ""
				},
        goodsList: [], //宝贝推荐
        search:"",//商品分类
				slidLeft: 0, // 顶部滑块
				navOpacity: 0, // 顶部透明度
				// 商品导航组件数据
				options: [{
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				],
				// 购买商品数
				goodsNum: 1,
				// 商品评价顶部距离
				assessTop: '',
				// 商品详情顶部距离
				detailsTop: '',
				// 商品推荐顶部距离
				describeTop: '',
				// 定时器
				timeout: '',
				// 顶部距离
				topDistance: 0,
				//商品good_id
				good_id: 0
			}
		},

		//打印出上个页面传递的参数。
		onLoad: function(option) {
			this.good_id = option.good_id;
			this.search = option.search;
      this.onShowData();
      this.requestGoodsList();
		},
		methods: {
			//初始化数据
			async onShowData() {
				let res = await this.$http('api/goodInfo', {
					good_id: this.good_id
				})
				this.allData = res.data.data;
				this.swiperImg = JSON.parse(this.allData.info[0].imgs).split(",");
				this.allData.info[0].info = JSON.parse(this.allData.info[0].info);
        this.allData.info[0].edition = JSON.parse(this.allData.info[0].edition);
        this.sku.price = this.allData.info[0].edition[0].price;
        this.sku.pic = this.allData.info[0].edition[0].pic;
      },
			//sku
			toggolSku(item) {
        this.sku.price = item.price
        this.sku.pic = item.pic
      },

      //宝贝推荐
      async requestGoodsList() {
				let res = await this.$http('api/promotionGoodList', {
					search: this.search
				});
        this.goodsList = res.data.data.data;
			},

      //宝贝推荐详情
      toDetail(item){
        uni.navigateTo({
          url:"/pages/detail/detail?good_id="+item.good_id
        })
      },
			// 商品数量变化
			goodsNumChaneg(e) {
				this.goodsNum = e.detail.value;
			},
			// 商品数量 加
			addGoodsNum() {
				this.goodsNum++;
			},
			// 商品数量 减
			lessGoodsNum() {
				this.goodsNum--;
			},
			// 服务弹出层 开
			openServe() {
				this.$refs.servePopup.open()
			},
			// 服务弹出层 关
			closeServerPop() {
				this.$refs.servePopup.close()
			},
			// 选择商品弹出层 开
			openguige() {
				this.$refs.guigePopup.open()
			},
			// 选择商品弹出层 关
			closeGuidePop() {
				this.$refs.guigePopup.close()
			},
			// 客户、店铺、购物车点击事件
			onClick(e) {
				uni.navigateTo({
					url: '/pages/shopcat/shopcat'
				})
			},
			// 加入购物车与立即购买点击事件
			buttonClick(e) {
				e.index == 0 && this.options[0].info++
				uni.showToast({
					title: `点击${e.index == 0 ? '加入购物车' : '立即购买'}`,
					icon: 'none'
				})
			},
			// 滚动事件
			scrollHandle(e) {
				if (20 < e.detail.scrollTop && e.detail.scrollTop < 300) {
					this.navOpacity = e.detail.scrollTop / 200;
				}
				clearTimeout(this.timeout)
				this.timeout = setTimeout(() => {
					if (e.detail.scrollTop < this.assessTop) {
						this.slidLeft = 0;
					}
					if (e.detail.scrollTop < this.detailsTop) {
						this.slidLeft = 1;
					}
					if (e.detail.scrollTop > this.detailsTop) {
						this.slidLeft = 2;
					}
					if (e.detail.scrollTop > this.describeTop) {
						this.slidLeft = 3;
					}
				}, 200);
			},
			// 滚动到顶部触发
			toUp() {
				this.navOpacity = 0;
			},
			// 滚动到底部触发
			toLow() {
				console.log('Low');
			},
			// 获取标签距离顶部的距离
			getTopPosition(id) {
				return new Promise((resolve, reject) => {
					wx.createSelectorQuery().select(id)
						.boundingClientRect().selectViewport()
						.scrollOffset().exec(function(res) {
							resolve(res)
						});
				})
			},
			scroolTo(val) {
				switch (val) {
					case 0:
						this.topDistance = -1;
						break;
					case 1:
						this.topDistance = this.assessTop;
						this.slidLeft = 1;
						break;
					case 2:
						this.topDistance = this.detailsTop;
						this.slidLeft = 2;
						break;
					case 3:
						this.topDistance = this.describeTop;
						this.slideLeft = 3;
						break;
				}
				this.$nextTick(() => {
					this.topDistance++;
				})
			}
		},
		watch: {
			// 商品数量最小为1
			goodsNum(val) {
				val <= 0 && (this.goodsNum = 1)
			}
		},
		mounted() {
			this.getTopPosition('#assess').then(res => this.assessTop = res[0].top);
			this.getTopPosition('#details').then(res => this.detailsTop = res[0].top);
			this.getTopPosition('.goods-recommend').then(res => this.describeTop = res[0].top);
		}
	};
</script>

<style lang="scss" scoped>
	.shop-wrap {
		padding: 30rpx;
		display: flex;
		flex-flow: row nowrap;

		.shop-log {
			flex: none;
			width: 120rpx;
			height: 120rpx;
			margin-right: 10rpx;

			image {
				width: 100%;
			}
		}

		.shop-title {
			flex: 1;
			display: flex;
			flex-flow: column nowrap;

			.shop-name {
				flex: 2
			}

			.shop-description {
				flex: 1;
			}
		}
	}

	.guige-popup {
		width: 100%;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		padding: 25rpx 25rpx 180rpx;
		position: relative;
		display: flex;
		flex-flow: column nowrap;
		justify-content: flex-start;
		background: #fff;

		.guige-top {
			height: 180rpx;
			display: flex;
			flex-flow: row nowrap;
			padding-bottom: 10rpx;
			border-bottom: 0.5px solid #EEEEEE;

			.guige-img {
				flex: 3;
				background-color: gray;

				.img {
					width: 100%;
					height: 100%;
				}
			}

			.guige-price-wrap {
				flex: 9;
				display: flex;
				flex-flow: column nowrap;
				padding-left: 15rpx;

				.guige-close-box {
					flex: 3;
					display: flex;
					flex-flow: row nowrap;
					justify-content: flex-end;
					align-items: flex-start;
				}

				.guige-price {
					flex: 2;
					font-size: 16px;
					font-weight: bold;
					color: red;
				}

				.guige-description {
					flex: none;
					font-size: 14px;
					color: #BCBDBE;
				}

			}
		}

		.guige-body {
			border-bottom: 0.5px solid #EEEEEE;

			.guige-body-tips {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 16px;
			}

			.goods-box-wrap {
				min-height: 90rpx;
				overflow: hidden;

				.goods-item {
					float: left;
					height: 70rpx;
					padding: 10rpx;
					display: flex;
					flex-flow: row nowrap;
					align-items: center;
					background: #F6F7F9;
					border-radius: 10rpx;
					margin-bottom: 20rpx;
					margin-right: 20rpx;

					.goods-item-img {
						height: 50rpx;
						width: 50rpx;
						margin-right: 10rpx;

						.img {
							width: 100%;
							height: 100%;
						}
					}

					.goods-item-text {
						max-width: 675rpx;
						font-size: 14px;
						line-height: 70rpx;
						overflow: hidden;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}
				}
			}
		}

		.guige-footer {
			height: 100rpx;
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			align-items: center;

			.goods-number {
				font-size: 16px;
			}

			.btn-grounp {
				flex: none;
				display: flex;
				flex-flow: row nowrap;
				text-align: center;

				.add,
				.less {
					width: 50rpx;
					height: 50rpx;
					background: #eee;
					font-size: 14px;
					line-height: 50rpx;
				}

				.add {
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
				}

				.less {
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}

				input {
					width: 50rpx;
					height: 50rpx;
					background: #eee;
					margin: 0 5rpx;
				}
			}
		}

		.guige-goods-nav {
			width: 700rpx;
			height: 70rpx;
			line-height: 70rpx;
			position: absolute;
			bottom: 10rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			display: flex;
			flex-flow: row nowrap;

			.guige-addshopcat,
			.guige-immediately-shoping {
				flex: 1;
				font-size: 16px;
				color: white;
				text-align: center;
			}

			.guige-addshopcat {
				border-top-left-radius: 35rpx;
				border-bottom-left-radius: 35rpx;
				background-color: #FE8753;
			}

			.guige-immediately-shoping {
				border-top-right-radius: 35rpx;
				border-bottom-right-radius: 35rpx;
				background-color: #FD4442;
			}
		}
	}

	.serve-popup {
		width: 100%;
		height: 50vh;
		background: #fff;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		padding: 20rpx 20rpx 10rpx;
		position: relative;

		.card-btn {
			width: 650rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			position: absolute;
			bottom: 15rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
			background: #FD4442;
			font-size: 14px;
			color: white;
			border-radius: 40rpx;
		}

		.card {
			padding: 15rpx;

			.title {
				height: 50rpx;
				line-height: 50rpx;
				font-size: 14px;
			}

			.note {
				font-size: 12px;
				line-height: 1.5;
				color: #A4A6A6;
			}
		}
	}

	.goods-assess {
		min-height: 50rpx;
		line-height: 50rpx;
		width: 720rpx;
		padding-right: 15px;
		margin: -10px 0;

		.user-wrap {
			width: 100%;
			height: 90rpx;
			display: flex;
			flex-flow: row nowrap;
			align-items: center;
			justify-content: space-between;

			.user-info {
				display: flex;
				flex-flow: row nowrap;

				.user-icon {
					width: 50rpx;
					height: 50rpx;
				}

				.user-name {
					padding-left: 10rpx;
				}
			}

			.rate-wrap {
				// flex:1;
			}
		}


	}

	.goods-classify {
		margin-top: 30rpx;
		font-size: 12px;
		color: #ccc;
	}

	.goods-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90rpx;
		padding-bottom: 10rpx;
	}

	.partition {
		height: 15rpx;
		width: 100%;
		background-color: #F4F8F9;
	}

	.body-slot {
		padding-left: 15rpx;
		font-size: 14px;
		color: #000;
	}

	.price-title {
		padding: 10 * $wx;
		padding-right: 0;

		.price {
			font-size: 18px;
			font-weight: bold;
			color: #FE4340;
		}

		.title-wrap {
			display: flex;
			flex-flow: row nowrap;
			justify-content: space-between;
			padding: 10 * $wx 0;

			.title {
				flex: 11;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.share {
				flex: 2;
				height: 50rpx;
				font-size: 12px;
				display: flex;
				flex-flow: row nowrap;
				justify-content: center;
				align-items: center;
				background-color: #F5F8F9;
				border-top-left-radius: 25rpx;
				border-bottom-left-radius: 25rpx;

				.share-icon {
					margin-right: 5rpx;
				}
			}
		}

		.note {
			font-size: 12px;
			color: #A0A3A3;
		}
	}

	.nav-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		height: 90rpx;

		.nav-btn {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-flow: row nowrap;
			line-height: 90rpx;
			text-align: center;
			background-color: #eee;

			view {
				flex: 1;
			}
		}

		.nav-slid-wrap {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 10rpx;

			// z-index: 101;
			.slid {
				width: 25%;
				height: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				transition: left .3s linear;

				.slid-bg {
					width: 60rpx;
					height: 100%;
					margin: 0 auto;
					background: red;
					border-radius: 5rpx;
				}
			}
		}

	}

	.detail {
		height: 100vh;
		margin-bottom: 90rpx;

	}

	.top-swiper {
		width: 750rpx;
		height: 350 * $px;
		margin-bottom: 14 * $px;
		;

		navigator {
			height: 100%;
			width: 100%;

			image {
				width: 100%;
			}
		}
	}

	.info {
		height: 800px;
	}

	.babyDetail,
	.babyRecommend {
		width: 100%;
		text-align: center;
		color: #ccc;
		font-size: 36rpx;
	}

	.goods-detail,
	.goods-recommend {
		width: 710rpx;
		margin: 0 20rpx;
		overflow: hidden;

		&>.goods-item:nth-child(2n-1) {
			margin-right: 20rpx;
		}

		.goods-item {
			float: left;
			width: 345rpx;
			margin-top: 20rpx;
			height: 470rpx;
			border-radius: 10rpx;
			background: #fff;
			overflow: hidden;
			display: flex;
			flex-flow: column nowrap;

			.goods-img {
				width: 100%;
				height: 342rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.goods-bottom-wrap {
				height: 128rpx;
				padding: 15rpx;

				.goods-description {
					min-height: 66rpx;
					font-size: 12px;
					line-height: 1.3;
					overflow: hidden;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.price-wrap {
					height: 32rpx;
					display: flex;
					flex-flow: row nowrap;
					justify-content: space-between;
					align-items: center;
					font-size: 14px;
					color: #FF4B4B;
				}

			}
		}
	}
</style>
